<template>
  <div class="x-line">
    <div :id="id" class="line-ctx"></div>
  </div>
</template>
<script>
export default {
  name: "xline",
  props: {
    mapType: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    desc: {
      type: String,
      default: ""
    },
    xData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    dataOther: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      option: null,
      singleOpt: {
        grid: {
          width: "80%",
          height: "100%",
          left: 50,
          bottom: 20
        },
        legend: {
          width: 20,
          orient: "vertical",
          height: 8,
          top: 10,
          right: 50,
          icon: "rect",
          itemWidth: 10, // 设置宽度

          itemHeight: 8, // 设置高度

          itemGap: 10, // 设置间距
          textStyle: {
            color: "#fff",
            fontSize: 14
          }
        },
        color: ["#68E0CF", "#209CFF", "#DEA55C", "#E16757", "#A1F68F"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              fontSize: 10
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "28",
            data: this.data
          }
        ]
      },
      doubleOpt: {
        grid: {
          width: "100%",
          height: "100%",
          left: 30,
          bottom: 20
        },
        legend: {
          width: 20,
          orient: "vertical",
          height: 8,
          top: 10,
          right: 50,
          icon: "rect",
          itemWidth: 10, // 设置宽度

          itemHeight: 8, // 设置高度

          itemGap: 10, // 设置间距
          textStyle: {
            color: "#fff",
            fontSize: 14
          }
        },
        color: ["#68E0CF", "#209CFF", "#DEA55C", "#E16757", "#A1F68F"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              fontSize: 10,
              rotate: -15
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            stack: "入住率",
            barWidth: "20",
            data: []
          },
          {
            name: "",
            type: "bar",
            stack: "入住率",
            barWidth: "20",
            data: []
          }
        ]
      },
      threeOpt: {
        grid: {
          width: "100%",
          height: "100%",
          left: 30,
          bottom: 20
        },
        legend: {
          width: 20,
          orient: "vertical",
          height: 8,
          top: 10,
          right: 50,
          icon: "rect",
          itemWidth: 10, // 设置宽度

          itemHeight: 8, // 设置高度

          itemGap: 10, // 设置间距
          textStyle: {
            color: "#fff",
            fontSize: 14
          }
        },
        color: ["#68E0CF", "#209CFF", "#DEA55C", "#E16757", "#A1F68F"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              fontSize: 10,
              rotate: -15
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            barGap: 0,
            barWidth: "14",
            data: []
          },
          {
            name: "",
            type: "bar",
            barWidth: "14",
            data: []
          },
          {
            name: "",
            type: "bar",
            barWidth: "14",
            data: []
          },
          {
            name: "",
            type: "bar",
            barWidth: "14",
            data: []
          }
        ]
      }
    };
  },
  created() {},
  mounted() {
    this.drawPie();
  },
  methods: {
    drawPie() {
      let echarts = this.$echarts.init(document.getElementById(this.id));
      this.option = this.singleOpt;
      echarts.setOption(this.option);
    }
  }
};
</script>
<style lang="less" scoped>
.x-line {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .line-ctx {
    width: 100%;
    height: 100%;
  }
}
</style>
